import { useState, useEffect } from 'react';
import {
    Row,
    Col,
    Image,
    Checkbox,
    Button,
    message,
    Input,
    Select,
} from 'antd';
import styles from './index.scss';
import {
    fetchBookList,
    batchExtensionBook,
    fetchPublishingHouseCate,
} from '@/service/extension';
import { fetchBookTypeList } from '@/service/enrollBook';
import { BookType } from '../enrollBook/interface';
const { Option } = Select;
interface SearchParms {
    book_name?: string;
    cate_id?: string;
    publish_date?: string;
}
export default function BookIndex() {
    const [state, setstate] = useState<SearchParms>({
        book_name: undefined,
        cate_id: undefined,
        publish_date: undefined,
    });
    const [checdList, setChecdList] = useState<any[]>([]);
    const [bookList, setbookList] = useState<any[]>([]);
    const [houseCate, sethouseCate] = useState<any[]>([]);
    const [bookTypeList, setbookTypeList] = useState<BookType[]>();
    const requestBookTypeList = async () => {
        const response = await fetchBookTypeList();
        if (response?.data) {
            setbookTypeList(response.data || []);
        }
    };
    const requestHouseCate = async () => {
        const response = await fetchPublishingHouseCate();
        if (response?.data) {
            sethouseCate(response.data || []);
        }
    };
    const dataSourceRequest = async () => {
        const response = await fetchBookList(state);
        if (response?.code === 200) {
            setbookList(response?.data || []);
        }
    };
    useEffect(() => {
        dataSourceRequest();
        requestBookTypeList();
        requestHouseCate();
    }, []);
    const setExtensionRequest = async (isbns: string) => {
        const response = await batchExtensionBook({ isbns });
        if (response?.code === 200) {
            message.success('推广成功');
            dataSourceRequest();
            setChecdList([]);
        } else {
            message.success('推广失败');
        }
    };

    return (
        <div>
            <div>
                <Row style={{ marginBottom: '20px' }}>
                    <Col span={8}>
                        <div>标题</div>
                        <Input
                            allowClear
                            style={{ marginTop: '10px', width: '90%' }}
                            value={state.book_name}
                            onChange={(e) => {
                                setstate({
                                    ...state,
                                    book_name: e.target.value,
                                });
                            }}
                        />
                    </Col>
                </Row>
                <Row style={{ marginBottom: '20px' }}>
                    <Col span={8}>
                        <div>书籍出版社</div>
                        <Select
                            allowClear
                            style={{ marginTop: '10px', width: '90%' }}
                            placeholder="请选择书籍出版社"
                            value={state.publish_date}
                            onChange={(value) => {
                                setstate({
                                    ...state,
                                    publish_date: value,
                                });
                            }}
                        >
                            {houseCate?.map((item, index) => {
                                return (
                                    <Option key={index} value={item}>
                                        {item}
                                    </Option>
                                );
                            })}
                        </Select>
                    </Col>
                    <Col span={8}>
                        <div>书籍类别</div>
                        <Select
                            allowClear
                            style={{ marginTop: '10px', width: '90%' }}
                            placeholder="请选择书籍类别"
                            value={state.cate_id}
                            onChange={(value) => {
                                setstate({
                                    ...state,
                                    cate_id: value,
                                });
                            }}
                        >
                            {bookTypeList?.map((item) => {
                                return (
                                    <Option key={item.id} value={item.id}>
                                        {item.cate_name}
                                    </Option>
                                );
                            })}
                        </Select>
                    </Col>
                    <Col span={8}>
                        <div>&nbsp;&nbsp;</div>
                        <Button
                            type="primary"
                            style={{ marginTop: '10px' }}
                            onClick={() => {
                                dataSourceRequest();
                            }}
                        >
                            搜索
                        </Button>
                    </Col>
                </Row>
            </div>
            <Row className={styles.booksWrap} gutter={[8, 10]}>
                {bookList &&
                    bookList.map((item: any) => (
                        <Col
                            span={3}
                            style={{
                                borderRadius: '4px',
                                marginBottom: '10px',
                            }}
                            key={item.isbn}
                        >
                            <div
                                style={{
                                    background: '#ddd',
                                    padding: '5px',
                                    borderRadius: '4px',
                                }}
                            >
                                <Checkbox
                                    checked={
                                        checdList.indexOf(item.isbn) !== -1
                                    }
                                    onChange={(e) => {
                                        if (e.target.checked) {
                                            let arr = checdList.concat([
                                                item.isbn,
                                            ]);
                                            setChecdList(arr);
                                        } else {
                                            let arr = checdList.filter(
                                                (i) => i !== item.isbn,
                                            );
                                            setChecdList(arr);
                                        }
                                    }}
                                />
                                <Image
                                    style={{ padding: '15px' }}
                                    preview={false}
                                    src={item.img_url}
                                />
                            </div>
                            <div className={styles.title}>{item.book_name}</div>
                        </Col>
                    ))}
            </Row>
            <Row justify="space-between" className={styles.bottomButton}>
                <Col></Col>
                <Col>
                    <Button
                        onClick={() => {
                            let arr = bookList.map((i) => {
                                return i.isbn;
                            });
                            setExtensionRequest(JSON.stringify(arr));
                        }}
                    >
                        全部推广
                    </Button>
                    <Button
                        type="primary"
                        style={{
                            marginLeft: '20px',
                        }}
                        onClick={() => {
                            setExtensionRequest(JSON.stringify(checdList));
                        }}
                    >
                        立即推广
                    </Button>
                </Col>
            </Row>
        </div>
    );
}
